
<template>
  <div class="table-container">
    <div class="control-panel">
      <input v-model="newName" placeholder="输入姓名">
      <input v-model.number="newCount" type="number" min="1" placeholder="数量">
      <button @click="addDynamicBatch">添加批次</button>
    </div>

    <table class="condition-table">
      <thead>
        <tr>
          <th v-for="(col, index) in columns" :key="index">{{ col.title }}</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(row, rowIndex) in processedData" :key="rowIndex">
          <tr  class="condition-row">
            <td 
              v-for="(col, colIndex) in columns" 
              :key="colIndex"
              :rowspan="row[col.prop + '_span'] || 1"
              :colspan="row[col.prop + '_colspan'] || 1"
              v-show="row[col.prop + '_span'] !== 0"
            >
              {{ row[col.prop] }}
            </td>
            <span v-if="shouldShowAndSign(row,columns,rowIndex)" class="and-sign">且</span>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    columns: Array
  },
  data() {
    return {
      tableData: [],
      batchCounter: 0,
      newName: '',
      newCount: 3
    }
  },
  computed: {
    processedData() {
      const data = JSON.parse(JSON.stringify(this.tableData))
      const mergerMap = new Map()
      
      data.forEach((row, index) => {
        if (!mergerMap.has(row.batchId)) {
          mergerMap.set(row.batchId, {
            start: index,
            count: 1
          })
        } else {
          mergerMap.get(row.batchId).count++
        }
      })

      mergerMap.forEach((value, batchId) => {
        const firstRow = data[value.start]
        firstRow.name_span = value.count
        
        for (let i = value.start + 1; i < value.start + value.count; i++) {
          data[i].name_span = 0
        }
      })
      console.log(data,"Data")  
      return data
    }
  },
  methods: {
    shouldShowAndSign(row,columns,index) {
      console.log(row,"row")
      console.log(columns,"columns")
      console.log(index,"index")
      console.log(this.processedData,"processedData")
      console.log(index>0,!this.isFirstInBatch(index),this.processedData[index].name_span !== 0)
      return index > 0 && 
             this.isFirstInBatch(index)

    },
    isFirstInBatch(index) {
      return this.processedData[index]?.batchId !== this.processedData[index-1]?.batchId
    },
    addDynamicBatch() {
      if (!this.newName || this.newCount < 1) return
      
      const newBatch = Array(this.newCount).fill().map((_, index) => ({
        name: this.newName,
        department: `部门 ${this.batchCounter + 1}`,
        position: `职位 ${index + 1}`,
        salary: 15000 + index * 1000,
        batchId: this.batchCounter
      }))
      
      this.tableData.push(...newBatch)
      this.batchCounter++
      this.newName = ''
      this.newCount = 3
    }
  }
}
</script>

<style scoped>
.table-container {
  position: relative;
}

.condition-table {
  width: 100%;
  border-collapse: collapse;
  position: relative;
}

.condition-table td, .condition-table th {
  padding: 8px;
  border: 1px solid #ddd;
  text-align: center;
}

.condition-row {
  position: relative;
}

.and-sign {
  position: absolute;
  left: 10px;
  transform: translateY(-50%);
  background: #f0f0f0;
  color: #0066cc;
  padding: 0 5px;
  font-size: 12px;
  z-index: 2;
  border: 1px solid #0066cc;
  border-radius: 3px;
}
</style>
